<template>
  <div class="app-container">
    <el-table
      :data="logicDictionariesList"
      style="width: 100%;"
    >

      <el-table-column :label="$t('value')" >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.value"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('language')" >
        <template slot-scope="scope">
          <el-select v-model="scope.row.language">
            <el-option
              v-for="item in languageList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column >
        <template slot="header">
          <el-button type="primary" icon="el-icon-plus" style="float: right" @click="addLogicDictionaries">{{ $t('add') }}</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="addOrUpdateProductLogicDictionaries(scope.row)"
          >{{ $t('save') }}</el-button>
          <el-button
            v-if="!scope.row.isAdd"
            type="danger"
            @click="delLogicDictionaries(scope.row)"
          >{{ $t('delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {
  successNotice,
  cancelNotice,
  listLanguage
} from '@/util/common'
import {
  insertDeviceWarnLogicDictionaries,
  deleteDeviceWarnLogicDictionaries,
  updateDeviceWarnLogicDictionaries,
  listDeviceWarnLogicDictionaries
} from '@/api/iot/iotDeviceWarnLogicDictionariesApi'
import {
  getLanguage
} from '@/util/storage'
export default {
  name: 'DictionariesModel',
  props: {
    logicId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      logicDictionariesList: [],
      language: [],
      languageList: []
    }
  },
  created() {
    this.languageList = listLanguage(this)
    this.listDeviceWarnLogicDictionaries()
  },
  methods: {
    listDeviceWarnLogicDictionaries() {
      listDeviceWarnLogicDictionaries({
        logicId: this.logicId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.logicDictionariesList = data
        } else {
          this.logicDictionariesList = []
        }
      })
    },
    addLogicDictionaries() {
      for (let i = 0, j = this.logicDictionariesList.length; i < j; i++) {
        if (this.logicDictionariesList[i].isAdd) {
          return
        }
      }
      const item = {
        value: '',
        language: getLanguage(),
        isAdd: true
      }
      this.logicDictionariesList.push(item)
    },
    addOrUpdateProductLogicDictionaries(item) {
      const json = {
        value: item.value,
        language: item.language,
        logicId: this.logicId
      }

      if (item.isAdd) {
        insertDeviceWarnLogicDictionaries(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.listDeviceWarnLogicDictionaries()
            this.$emit('change', {})
          }
        })
      } else {
        json.dicId = item.dicId
        updateDeviceWarnLogicDictionaries(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.listDeviceWarnLogicDictionaries()
            this.$emit('change', {})
          }
        })
      }
    },
    delLogicDictionaries(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.value, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceWarnLogicDictionaries({
            dicId: item.dicId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listDeviceWarnLogicDictionaries()
            }
            that.$emit('change', {})
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>
